<template>
  <div>
    <p>搜索结果：</p>
    <Loading v-if="songs.length==0"></Loading>
    <ul class="songlist">
      <template v-if="songs.length!=0">
        <li v-for="item in songs" :key="item.id">
          <div class="left">
            <h5 v-html="$options.filters.highlight(item.name,keywords)"></h5>
            <p>
              <span v-if="item.artists">
                <span v-html="$options.filters.highlight(item.artists[0].name,keywords)"></span>
              </span>
              <span v-html="$options.filters.highlight(item.name,keywords)"></span>
            </p>
          </div>
         <div  @click="$emit('play',item)" class="playbtn" ></div>
        </li>

      </template>
    </ul>
  </div>
</template>
<script>
import Loading from '@/components/Loading'

export default {
  name:'SearchResult',
  props:['keywords'],
  data(){
    return{
      songs:[]
    }
  },
  components:{
    Loading
  },
  filters:{
    addZero(val){
      return val<10?'0'+val:val
    },
    highlight(value,keywords){
      let str=String(value).replace(keywords,'<span style="color:#dd001b">'+keywords+'</span>');
      return str;
    }
  },
  created(){
    this.$http.get('/search',{
      params:{
        keywords:this.keywords
      }
    }).then(d => {
      if(!d.data.result.songs)return;
      this.songs=d.data.result.songs;
    })
  },
}
</script>
<style lang="less" scoped>
.songlist{
  padding-left: 10px;
  li{
    display: flex;
    border-bottom: 1px solid #00000038;
    line-height: 2;
    justify-content:space-between;
    align-content: center;
    .left{
      width: 80%;
    font-size: 18px;
    p{
      font-size: 14px;
    }
    }
    .playbtn{
        display: inline-block;
    width: 22px;
    height: 22px;
    background: url(../assets/pic/index_icon_2x.png) no-repeat;
    background-size: 166px 97px;
    background-position: -24px 0;
    margin-top: 11px;
    }
  }
}
</style>